<template>
	<div>
		<el-row :gutter="10">
			<el-col :span="24">
				<el-card shadow="never" class="card">
					<div id="charts_one" style="width:100%;min-height:80vh">
						<Search size='small' :searchVisible="searchVisible" :searchData.sync="searchData"  :searchForm="searchForm" @refresh_list="index"></Search>
						<div class="btn-group" style="margin-bottom:11px;">
                           <div>
							   <el-button type="success"  size="mini" icon="el-icon-plus"  @click="add(ids)" v-if="checkPermission('/app/User/add.html')" >{{$t('action.add')}}</el-button>   
                               <el-button type="primary" :disabled="single" size="mini" icon="el-icon-edit"  @click="update(ids)" v-if="checkPermission('/app/User/update.html')" >{{$t('action.update')}}</el-button>  
							   <el-button type="danger" :disabled="multiple" size="mini" icon="el-icon-delete"  @click="del(ids)" v-if="checkPermission('/app/User/delete.html')" >{{$t('action.delete')}}</el-button>     
                               <el-button type="info" :disabled="single" size="mini" icon="el-icon-view"  @click="detail(ids)" v-if="checkPermission('/app/User/detail.html')" >{{$t('action.detail')}}</el-button>  
                               <el-button type="primary" :disabled="single" size="mini" icon="el-icon-lock"  @click="resetPwd(ids)" v-if="checkPermission('/app/User/resetPwd.html')" >{{$t('action.resetPwd')}}</el-button>  
                               <el-button type="warning" :disabled="single" size="mini" icon="el-icon-plus"  @click="plus(ids)" v-if="checkPermission('/app/User/plus.html')" >{{$t('action.plus')}}</el-button>  
                               <el-button type="warning" :disabled="single" size="mini" icon="el-icon-plus"  @click="minus(ids)" v-if="checkPermission('/app/User/minus.html')" >{{$t('action.minus')}}</el-button>  
                               <el-button type="warning" :disabled="single" size="mini" icon="el-icon-plus"  @click="jumpUserAccount(ids)" v-if="checkPermission('/app/User/jumpUserAccount.html')" >{{$t('action.jumpUserAccount')}}</el-button>  
                               <el-button type="success" :disabled="single" size="mini" icon="el-icon-plus"  @click="flowLog(ids)" v-if="checkPermission('/app/User/flowLog.html')" >{{$t('action.flowLog')}}</el-button>  
                           </div>
                           <table-tool :searchVisible.sync="searchVisible"  :fieldList="fieldList" @refresh_list="index" :searchTool="true"></table-tool>
						</div>
					    <el-table :row-class-name="rowClass" @selection-change="selection"  @row-click="handleRowClick"  row-key="id"  :header-cell-style="{ background: '#eef1f6', color: '#606266' }" v-loading="loading"  ref="multipleTable" border class="eltable" :data="list"  style="width: 100%">		   
						    <el-table-column align="center" type="selection" width="42"></el-table-column>
							<el-table-column align="center" type='' v-if="fieldList[0].checked" property="id" label="ID" show-overflow-tooltip width="70">
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[1].checked" property="name" :label="$t('field.User_name')" show-overflow-tooltip width="" >
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[2].checked" property="number" :label="$t('field.User_number')" show-overflow-tooltip width="" >
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[3].checked" property="real_name" :label="$t('field.User_real_name')" show-overflow-tooltip width="" >
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[4].checked" property="phone" :label="$t('field.User_phone')" show-overflow-tooltip width="" >
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[5].checked" property="code" :label="$t('field.User_code')" show-overflow-tooltip width="" >
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[6].checked" property="email" :label="$t('field.User_email')" show-overflow-tooltip width="" >
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[7].checked" property="reid" :label="$t('field.User_reid')" show-overflow-tooltip width="" >
							</el-table-column>
							<el-table-column align="center>"  v-if="fieldList[8].checked" property="simulate_uid" :label="$t('field.User_simulate_uid')" show-overflow-tooltip width="" >
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[9].checked" property="agent" :label="$t('field.User_agent')" show-overflow-tooltip width="" >
							</el-table-column>
							<el-table-column align="center>"  v-if="fieldList[10].checked" property="push_team" :label="$t('field.User_push_team')" show-overflow-tooltip width="" >
							</el-table-column>
							<el-table-column align="center>"  v-if="fieldList[11].checked" property="team" :label="$t('field.User_team')" show-overflow-tooltip width="" >
							</el-table-column>
							<el-table-column align="center>"  v-if="fieldList[12].checked" property="extension_type" :label="$t('field.User_extension_type')" show-overflow-tooltip width="">
							       <template slot-scope="scope"> 
							          <el-tag  v-if="scope.row.extension_type == '0'" size="mini" effect="dark">推广码</el-tag>
							          <el-tag  v-if="scope.row.extension_type == '1'" size="mini" effect="dark">推广链接</el-tag>
							       </template>    
							 </el-table-column>
							<el-table-column align="center"  v-if="fieldList[13].checked" property="type" :label="$t('field.User_type')" show-overflow-tooltip width="">
							       <template slot-scope="scope"> 
							          <el-tag  v-if="scope.row.type == '0'" size="mini" effect="dark">普通用户</el-tag>
							          <el-tag  v-if="scope.row.type == '1'" size="mini" effect="dark">测试用户</el-tag>
							          <el-tag  v-if="scope.row.type == '2'" size="mini" effect="dark">机构</el-tag>
							       </template>    
							 </el-table-column>
							<el-table-column align="center"  v-if="fieldList[14].checked" property="status" :label="$t('field.User_status')" show-overflow-tooltip width="">
							       <template slot-scope="scope"> 
							          <el-tag type="danger" v-if="scope.row.status == '0'" size="mini" effect="dark">禁用</el-tag>
							          <el-tag type="info" v-if="scope.row.status == '1'" size="mini" effect="dark">正常</el-tag>
							          <el-tag type="warning" v-if="scope.row.status == '2'" size="mini" effect="dark">锁定</el-tag>
							       </template>    
							 </el-table-column>
							<el-table-column align="center"  v-if="fieldList[15].checked" property="create_time" :label="$t('field.User_create_time')" show-overflow-tooltip width="" >
							</el-table-column>
							<el-table-column align="center>"  v-if="fieldList[16].checked" property="ip" :label="$t('field.User_ip')" show-overflow-tooltip width="" >
							</el-table-column>
							 <el-table-column align="center"  v-if="fieldList[17].checked" property="certified" :label="$t('field.User_certified')" show-overflow-tooltip width="">
								<template slot-scope="scope">
									 <el-tag  v-if="scope.row.certified == '1'" size="mini" effect="dark">是</el-tag>
									 <el-tag  v-if="scope.row.certified == '0'" size="mini" effect="dark">否</el-tag>
								</template>
							</el-table-column>	
							 <el-table-column align="center"  v-if="fieldList[18].checked" property="certified_time" :label="$t('field.User_certified_time')" show-overflow-tooltip width="" >
								<template slot-scope="scope">
								           {{parseTime(scope.row.certified_time)}}
								  
									
								</template>
							 </el-table-column>
							<el-table-column align="center"  v-if="fieldList[19].checked" property="vip" :label="$t('field.User_vip')" show-overflow-tooltip width="">
							       <template slot-scope="scope">  
     								  {{getVipValue(scope.row.vip)}}
      							   </template>
							 </el-table-column>
							 <el-table-column align="center>"  v-if="fieldList[20].checked" property="last_time" :label="$t('field.User_last_time')" show-overflow-tooltip width="" >
								<template slot-scope="scope">
								           {{parseTime(scope.row.last_time)}}
								  
									
								</template>
							 </el-table-column>
							 <el-table-column align="center>"  v-if="fieldList[21].checked" property="login_time" :label="$t('field.User_login_time')" show-overflow-tooltip width="" >
								<template slot-scope="scope">
								           {{parseTime(scope.row.login_time)}}
								  
									
								</template>
							 </el-table-column>
							<el-table-column align="center>"  v-if="fieldList[22].checked" property="login_ip" :label="$t('field.User_login_ip')" show-overflow-tooltip width="" >
							</el-table-column>
							<el-table-column align="center>"  v-if="fieldList[23].checked" property="caller" :label="$t('field.User_caller')" show-overflow-tooltip width="">
							       <template slot-scope="scope">  
     								  {{getCallerValue(scope.row.caller)}}
      							   </template>
							 </el-table-column>
							<el-table-column align="center"  v-if="fieldList[24].checked" property="core_set" :label="$t('field.User_core_set')" show-overflow-tooltip width="">
							       <template slot-scope="scope">  
     								  {{getCore_setValue(scope.row.core_set)}}
      							   </template>
							 </el-table-column>
							<el-table-column align="center>"  v-if="fieldList[25].checked" property="app_version" :label="$t('field.User_app_version')" show-overflow-tooltip width="" >
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[26].checked" property="remark" :label="$t('field.User_remark')" show-overflow-tooltip width="" >
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[27].checked" property="user_account_account" :label="$t('field.User_user_account_account')" show-overflow-tooltip width="" >
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[28].checked" property="user_account_rec_total" :label="$t('field.User_user_account_rec_total')" show-overflow-tooltip width="" >
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[29].checked" property="user_account_wit_total" :label="$t('field.User_user_account_wit_total')" show-overflow-tooltip width="" >
							</el-table-column>
							  <el-table-column :fixed="$store.getters.device !== 'mobile'?'right':false" :label="$t('system.operation')" align="center" width="160">
								<template slot-scope="scope">
									<div v-if="scope.row.id">
										<el-button size="mini" type="danger" @click="forbidden(scope.row)"  v-if="checkPermission('/app/User/forbidden.html') && scope.row.status==1"><i class="el-icon-edit-outline" />{{$t('action.forbidden')}}</el-button>
										<el-button size="mini" type="primary" @click="unforbidden(scope.row)"  v-if="checkPermission('/app/User/unforbidden.html') && scope.row.status==0"><i class="el-icon-edit-outline" />{{$t('action.unforbidden')}}</el-button>
									</div>
								</template>
							  </el-table-column>
						</el-table>
						<Page :total="page_data.total" :page.sync="page_data.page" :limit.sync="page_data.limit" @pagination="index" />
					</div>
				</el-card>
			</el-col>
		</el-row>
	    <!--添加-->
		<Add  :show.sync="dialog.addDialogStatus" size="small" @refresh_list="index"></Add>
		<!--修改-->
		<Update :info="updateInfo" :show.sync="dialog.updateDialogStatus" size="small" @refresh_list="index"></Update>
		<!--查看详情-->
		<Detail :info="detailInfo" :show.sync="dialog.detailDialogStatus" size="small" @refresh_list="index"></Detail>
		<!--重置密码-->
		<ResetPwd :info="resetPwdInfo" :show.sync="dialog.resetPwdDialogStatus" size="small" @refresh_list="index"></ResetPwd>
	   <!--后台充值-->
	    <indexPlusDialog :querys="querys" :show.sync="dialog.indexPlusDialogStatus" size="small" /> 
	   <!--后台扣除-->
	    <indexMinusDialog :querys="querys" :show.sync="dialog.indexMinusDialogStatus" size="small" /> 
	   <!--资金流水-->
	    <indexFlowLogDialog :querys="querys" :show.sync="dialog.indexFlowLogDialogStatus" size="small" /> 
	</div>
</template>
<script>
	import {
	    index, 
	    updateExt, 
	    getUpdateInfo,
	    del,
	    forbidden,       
	    unforbidden,       
	} from '@/api/app/user'
	import Search from '@/components/common/Search.vue'
	import Page from '@/components/common/Page.vue'
	import TableTool from '@/components/common/TableTool.vue'
	import { confirm,param2Obj } from '@/utils/common'
	import Add from '@/views/app/user/add.vue' 
	import Update from '@/views/app/user/update.vue' 
	import Detail from '@/views/app/user/detail.vue' 
	import ResetPwd from '@/views/app/user/resetPwd.vue' 
	import indexPlusDialog from '@/views/app/plus/indexdialog'    
	import indexMinusDialog from '@/views/app/minus/indexdialog'    
	import indexFlowLogDialog from '@/views/app/flowlog/indexdialog'    
	export default {
		name:'user',
		components: {
			Search,
			Page,
			TableTool,
	        Add,  
	        Update,  
	        Detail,  
	        ResetPwd,  
	        indexPlusDialog,
	        indexMinusDialog,
	        indexFlowLogDialog,
		},
		data(){
			return {
				dialog: {
	                    addDialogStatus : false,           
	                    updateDialogStatus : false,           
	                    detailDialogStatus : false,           
	                    resetPwdDialogStatus : false,           
	                    indexPlusDialogStatus: false,
	                    indexMinusDialogStatus: false,
	                    indexFlowLogDialogStatus: false,
				},
				fieldList:[
					{lable:'ID',checked:true},
				    {lable:this.$t('field.User_name'),checked:true},
				    {lable:this.$t('field.User_number'),checked:true},
				    {lable:this.$t('field.User_real_name'),checked:true},
				    {lable:this.$t('field.User_phone'),checked:true},
				    {lable:this.$t('field.User_code'),checked:true},
				    {lable:this.$t('field.User_email'),checked:true},
				    {lable:this.$t('field.User_reid'),checked:true},
				    {lable:this.$t('field.User_simulate_uid'),checked:false},
				    {lable:this.$t('field.User_agent'),checked:true},
				    {lable:this.$t('field.User_push_team'),checked:false},
				    {lable:this.$t('field.User_team'),checked:false},
				    {lable:this.$t('field.User_extension_type'),checked:false},
				    {lable:this.$t('field.User_type'),checked:true},
				    {lable:this.$t('field.User_status'),checked:true},
				    {lable:this.$t('field.User_create_time'),checked:true},
				    {lable:this.$t('field.User_ip'),checked:false},
				    {lable:this.$t('field.User_certified'),checked:true},
				    {lable:this.$t('field.User_certified_time'),checked:true},
				    {lable:this.$t('field.User_vip'),checked:true},
				    {lable:this.$t('field.User_last_time'),checked:false},
				    {lable:this.$t('field.User_login_time'),checked:false},
				    {lable:this.$t('field.User_login_ip'),checked:false},
				    {lable:this.$t('field.User_caller'),checked:false},
				    {lable:this.$t('field.User_core_set'),checked:true},
				    {lable:this.$t('field.User_app_version'),checked:false},
				    {lable:this.$t('field.User_remark'),checked:true},
				    {lable:this.$t('field.User_user_account_account'),checked:true},
				    {lable:this.$t('field.User_user_account_rec_total'),checked:true},
				    {lable:this.$t('field.User_user_account_wit_total'),checked:true},
				],
				ids: [],
				selectRows:[],
				selectTotal:0,
				single:true,
				multiple:true,
				list: [],
				small_tables:{},
	            addInfo:{},
	            updateInfo:{},
	            detailInfo:{},
	            resetPwdInfo:{},
	            forbiddenInfo:{},
	            unforbiddenInfo:{},
				loading: false,
	            querys:{},
				page_data: {
					limit: 20,
					page: 1,
					total:20,
				},
				searchVisible:true,
				searchForm:[],
				searchData:{},
			}
		},
		methods: {
			index(){
				let param = {limit:this.page_data.limit,page:this.page_data.page}
				Object.assign(param, this.searchData,param2Obj(this.$route.fullPath))
				this.loading = true
				index(param).then(res => {
					this.list = res.data.data
					this.small_tables=res.sql_field_data
					this.page_data.total = res.data.total
					this.loading = false
					if(this.page_data.page == 1){
						this.searchForm = [
						        {type:'Input',label:this.$t('field.User_name'),prop:'name',width:'150px'},   
						        {type:'Input',label:this.$t('field.User_real_name'),prop:'real_name',width:'150px'},   
						        {type:'Input',label:this.$t('field.User_phone'),prop:'phone',width:'150px'},   
						        {type:'Input',label:this.$t('field.User_agent'),prop:'agent',width:'150px'},   
						       {type:'Select',label:this.$t('field.User_type'),prop:'type',data:[{"val":"0","key":"普通用户"},{"val":"1","key":"测试用户"},{"val":"2","key":"机构"}],width:'150px'},
						       {type:'Select',label:this.$t('field.User_status'),prop:'status',data:[{"val":"0","key":"禁用","label_color":"danger"},{"val":"1","key":"正常","label_color":"info"},{"val":"2","key":"锁定","label_color":"warning"}],width:'150px'},
						       {type:'Select',label:this.$t('field.User_vip'),prop:'vip',data:res.sql_field_data.vips,width:'150px'},
						       {type:'Select',label:this.$t('field.User_caller'),prop:'caller',data:res.sql_field_data.callers,width:'150px'},
						]
					}
				})
			},
			getVipValue(e) {
               for (var i = 0; i < this.small_tables.vips.length; i++) {
                 if (this.small_tables.vips[i].val == e) {
                    return this.small_tables.vips[i].key;
                 }
               }
             },
			getCallerValue(e) {
               for (var i = 0; i < this.small_tables.callers.length; i++) {
                 if (this.small_tables.callers[i].val == e) {
                    return this.small_tables.callers[i].key;
                 }
               }
             },
			getCore_setValue(e) {
               for (var i = 0; i < this.small_tables.core_sets.length; i++) {
                 if (this.small_tables.core_sets[i].val == e) {
                    return this.small_tables.core_sets[i].key;
                 }
               }
             },
			updateExt(row,field){
				if(row.id){
					updateExt({id:row.id,[field]:row[field]}).then(res => {
						this.$message({message: this.$t('system.success'), type: 'success'})
					})
				}
			},
			add(){
				this.dialog.addDialogStatus = true
			},
			update(row){
				let id = row.id ? row.id : this.ids.join(',')
				getUpdateInfo({id:id}).then(res => {
					if(res.status == 200){
						this.dialog.updateDialogStatus = true
						this.updateInfo = res.data
					}
				})
			},
			del(row){
				confirm({content:this.$t('system.confirmOperation')}).then(() => {
					let ids = row.id ? row.id : this.ids.join(',')
					del({id:ids}).then(res => {
						this.$message({message: this.$t(res.msg), type: 'success'})
						this.index()
					})
				}).catch(() => {})
			},
			detail(row){
				this.dialog.detailDialogStatus = true
				this.detailInfo = {id:row.id ? row.id : this.ids.join(',')}
			},
			resetPwd(row){
				this.dialog.resetPwdDialogStatus = true
				this.resetPwdInfo = {id:row.id ? row.id : this.ids.join(',')}
			},
			forbidden(row){
			    if(!this.canOperate(1)) return;
			    confirm({content:this.$t('system.confirmOperation')}).then(() => {
					let ids = row.id ? row.id : this.ids.join(',')
					forbidden({id:ids}).then(res => {
						this.$message({message: this.$t(res.msg), type: 'success'})
						this.index()
					})
				}).catch(() => {}) 
			},
			unforbidden(row){
			    if(!this.canOperate(0)) return;
			    confirm({content:this.$t('system.confirmOperation')}).then(() => {
					let ids = row.id ? row.id : this.ids.join(',')
					unforbidden({id:ids}).then(res => {
						this.$message({message: this.$t(res.msg), type: 'success'})
						this.index()
					})
				}).catch(() => {}) 
			},
			plus(row){
				let ids = row.id ? row.id : this.ids.join(',')
				this.querys={uid:ids}
				this.dialog.indexPlusDialogStatus=true
			},
			minus(row){
				let ids = row.id ? row.id : this.ids.join(',')
				this.querys={uid:ids}
				this.dialog.indexMinusDialogStatus=true
			},
			jumpUserAccount(row){
				let query = {}
				let ids = row.id ? row.id : this.ids.join(',')
				let data = {}
				this.list.forEach((item,i) => {
					if(item.id == ids){
						data = this.list[i]
					}
				})
				Object.assign(query, {uid:data.id})
				this.$router.push({path: '/app/UserAccount/index.html',query:query})
			},
			flowLog(row){
				let ids = row.id ? row.id : this.ids.join(',')
				this.querys={uid:ids}
				this.dialog.indexFlowLogDialogStatus=true
			},
		    canOperate(status){
				let isOK=false
				if (this.selectRows && this.selectRows.length > 0) {
					if (this.selectRows[0].status == status) {
						isOK=true
					}
				}else if(row.id){
					if (row.status == status) {
						isOK=true
					}
				}
				if(!isOK) this.$message.error(this.$t('system.statusError'));
				return isOK
		    },

			selection(selection) {
			    this.selectRows=selection
			    this.selectTotal=selection.length
				this.ids = selection.map(item => item.id)
				this.single = selection.length != 1
				this.multiple = !selection.length
			},
			handleRowClick(row, rowIndex,event){
				if(event.target.className !== 'el-input__inner'){
					this.$refs.multipleTable.toggleRowSelection(row)
				}
			},
			rowClass ({ row, rowIndex }) {
				for(let i=0;i<this.ids.length;i++) {
					if (row.id === this.ids[i]) {
						return 'rowLight'
					}
				}
			},
		},	
		mounted(){
			this.index()
		}
	}
</script>
<style  lang="scss">
@import '@/assets/scss/common.scss'
</style>